<template>
<div>
    <!-- 搜索 -->
    <search/>
    <!-- /搜索 -->
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="area">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for ="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <!-- 宫格导航 -->
        <van-grid column-num="5" clickable square :border="false">
        <van-grid-item
        v-for="cate in cates"
        :key="cate.id"
        :icon="cate.icon"
        :text="cate.name"
        :to="{
          path:'/itemLists',
          query: {
            cate_id: cate.id
          }
        }" />
      </van-grid>
      <!-- /宫格导航 -->
      <!-- 推荐商品 -->
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="offset"
        finished-text="没有更多了"
        @load="onLoad"
        v-if="items.length"
      >
        <floor 
        @clickItem="enterDetail"
        @clickAddItem="addCart"
        :items="items"/>
      </van-list>
      <!-- /推荐商品 -->
    </div>
  </van-pull-refresh>
    <my-tabbar/>
</div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import Search from './components/Search'
import Floor from './components/Floor'
import { fetchBanner, fetchCate, commodity } from '@api'
import addCart from '@/mixins/addCart'
export default {
  mixins: [addCart],
  name: 'home',
  data () {
    return {
      banners: [],
      cates: [],
      items: [],
      page: 1,
      pageSize: 5,
      loading: false,
      finished: false,
      offset: 20,
      isLoading: false
    }
  },
  created () {
    this.fetchBanner()
    this.fetchCates()
    this.commodity()
  },
  methods: {
    addCart (item) {
      item = { ...item, num: 1, checked: true } 
      this._addCart(item)     
    },
    enterDetail (itemId) {
      this.$router.push(`/detail/${itemId}`)
    },
    onRefresh () {
      this.items = []
      this.page = 1
      this.finished = false
      this.commodity()
    },
    onLoad () {
      // 上拉加载事件
      this.page++
      this.commodity()
    },
    commodity () {
      // 请求商品
      commodity({
        categoryId: 212229,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        // console.log(res)
        this.isLoading = false
        if (res.data.code === 700) {
          this.loading = false
          this.finished = true
        }
        if (res.data.code === 0) {
          this.items = [...this.items, ...res.data.data]
          this.loading = false
        }
      })
    },
    fetchBanner () {
      // 请求banner
      fetchBanner().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    fetchCates () {
      // 请求cate
      fetchCate().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
  },
  components: {
    MyTabbar,
    Search,
    Floor
  }
}
</script>

<style lang="scss" scoped>
  .area{
    padding: 0 5px;
    margin: 50px 0;
    .my-swipe{
      margin: 10px 0;
       border-radius: 10px;
      img{
        width: 100%;
      }
    }
    /deep/.van-grid{
      img{
        width: 40px;
        height: 40px;
      }
      span{
        font-size: 14px;
      }
    }
  }
</style>>
